<template>
  <div class="c-lsy-side flex flex-col h-full">
    <div v-if="showLogo" class="shrink-0">
      <LsyLogo :show-text="showLogoText"></LsyLogo>
    </div>
    <div class="flex-1 h-0 overflow-auto">
      <el-scrollbar view-class="h-full">
        <LsyMenu
          v-if="showMenu"
          mode="vertical"
          :menus="menus"
          :collapse="collapseMenu"
          :popper-class="`o-lsy-main-menu-vertical ${menuPopperAppendCls}`"
          @on-select="onMenuSelect"
        ></LsyMenu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'SystemSide' })

const props = defineProps({
  menus: {
    type: Array,
    default: () => [],
  },
  showLogo: {
    type: Boolean,
    default: true,
  },
  showLogoText: {
    type: Boolean,
    default: true,
  },
  showMenu: {
    type: Boolean,
    default: true,
  },
  collapseMenu: {
    type: Boolean,
    default: false,
  },
  /**
   * 菜单组件Popper附加样式
   */
  menuPopperAppendCls: {
    type: String,
    default: '',
  },
})
console.log(props)

const $emits = defineEmits('onMenuSelect')
function onMenuSelect(index, indexPath) {
  $emits('onMenuSelect', index, indexPath)
}
</script>

<style scoped lang="scss">
.el-menu.o-lsy-main-menu-vertical.el-menu--collapse {
  width: 100%;

  ::v-deep(.el-menu-item) {
    display: flex;
    justify-content: center;
  }

  ::v-deep(.el-sub-menu__title) {
    display: flex;
    justify-content: center;
  }
}
</style>
